import React, { forwardRef } from 'react';
import './index.scss';

export interface TaskRecord {
  key: string;
  eventName: string;
  time: string;
  currentStatus: string;
  location: string;
  level: string;
}

export interface TaskStatistics {
  totalTasks: number;
  completedTasks: number;
  completionRate: string;
}

export interface TaskTrackingProps {
  /**
   * 组件标题
   */
  title?: string;

  /**
   * 英文标题
   */
  englishTitle?: string;

  /**
   * 任务统计数据
   */
  taskStatistics?: TaskStatistics;

  /**
   * 任务记录数据
   */
  taskRecords?: TaskRecord[];

  /**
   * 行点击事件
   */
  onRowClick?: (record: TaskRecord, index: number) => void;

  /**
   * 点击事件
   */
  onClick?: () => void;

  /**
   * 自定义样式
   */
  style?: React.CSSProperties;

  /**
   * 自定义类名
   */
  className?: string;

  // 低代码平台相关属性
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const TaskTracking = forwardRef<HTMLDivElement, TaskTrackingProps>((props, ref) => {
  const {
    title = '任务追踪',
    subtitle = 'Task Tracking',
    headerTextColor = '#56A5FF',
    recordTextColor = 'rgba(255,255,255,0.9)',
    taskStatistics = {
      totalTasks: 278,
      completedTasks: 78,
      completionRate: '30%'
    },
    tableHeaders = [
      { key: 'title', value: '事件名称', width: '25' },
      { key: 'month', value: '时间', width: '15' },
      { key: 'type', value: '当前状态', width: '15' },
      { key: 'address', value: '位置', width: '32' },
      { key: 'expiring', value: '等级', width: '13' },
    ],
    records = [
      { id: '1', title: '事件名称', month: '07-01', address: '华阳老街是这里呀', type: '问题分类',  expiring: '一级'},
      { id: '2', title: '事件名称', month: '07-02', address: '地址', type: '问题分类', expiring: '一级' },
      { id: '3', title: '事件名称', month: '07-03', address: '地址', type: '问题分类', expiring: '一级' },
      { id: '4', title: '事件名称', month: '07-04', address: '地址', type: '问题分类', expiring: '一级' },
    ],
    onRowClick,
    onClick,
    style = {},
    className = '',
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;
  const componentStyle: React.CSSProperties = {
    width: '500px',
    height: '630px',
    ...style
  };
  const handleClick = () => {
    onClick?.();
  };

  const handleRowClick = (record: TaskRecord, index: number) => {
    onRowClick?.(record, index);
  };

  const componentClassName = [
    'hzdz-task-tracking',
    className
  ].filter(Boolean).join(' ');

  return (
    <div
      ref={ref}
      className={componentClassName}
      style={componentStyle}
      onClick={handleClick}z
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      <div className="title-wrap" style={{backgroundImage: 'url(http://localhost:8085/static/images/zonghezhifa/title-bg.png)'}}>
        <div className="title-str">
          <div className="title">
            <div>{title}</div>
            <div className="sen-title">{title}</div>
          </div>
          <div className="subtitle">{subtitle}</div>
        </div>
      </div>
      <div className="content-wrap">
        <div className="data-wrap">
          <div className="icon" style={{backgroundImage: 'url(static/images/yuangongguanli/task-icon.png)'}} />
          <div className="right-data">
            <div className="data-item">
              <div>任务总数</div>
              <div className="value">
                <div className="value-bg">
                  <div>{taskStatistics.totalTasks}</div>
                </div>
              </div>
            </div>
            <div className="data-item">
              <div>已完成</div>
              <div className="value-bg">
                <div>{taskStatistics.completedTasks}</div>
              </div>
            </div>
            <div className="data-item">
              <div>完成率</div>
              <div className="value-bg">
                <div>{taskStatistics.completionRate}</div>
              </div>
            </div>
          </div>
        </div>
        <div className="table-area">
          {/* 表头 */}
          <div className="table-header" style={{backgroundImage:`url(http://localhost:8085/static/images/qixiangfangzhai/bz54.png)`}}>
            {tableHeaders.map((head,value) => (
              <div
                className="header-cell"
                style={{ color: headerTextColor, width: `${head.width}%` }}
              >
                {head.value}
              </div>
            ))}
          </div>
          {/* 表格数据 */}
          <div className="table-body"  style={{height: 'calc(100% - 40px)'}}>
            {records.map((record, index) => (
              <div
                key={record.id}
                className="table-row"
              >
                {tableHeaders.map((head) => (
                  <div
                    className="table-cell"
                    style={{ color: recordTextColor, width: `${head.width}%` }}
                  >
                    {record[head.key]}
                  </div>
                ))}
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="bottom-line" />
    </div>
  );
});

TaskTracking.displayName = 'TaskTracking';

export default TaskTracking;
